<template>
    <div class="bg-[#fff]  rounded-[1.1rem] border border-[#F3F4F6] p-[1.5rem]">
        <p class="text-[1rem] font-[Inter] font-normal leading-[1.5rem] text-[#000000] flex items-center gap-[0.5rem]"><img src="/public/icon/crown.png" class="w-[1rem] h-[1rem]" />成长体系</p>
        <div class="flex flex-col gap-[1rem]">
            <div v-for="item in data" v-key="item.name" class="p-[0.75rem] rounded-[0.5rem] flex items-center gap-[0.75rem]" :style="{background:item.background} ">
                <div class="w-[2.5rem] h-[2.5rem] rounded-[0.5rem] flex items-center justify-center flex-shrink-0" :style="{background: item.imageBackground}">
                    <img :src="item.image" class="w-[1rem] h-[1rem]" alt="">
                </div>
                <div class="flex gap-[0.75rem]">
                    <div class="flex flex-col  w-[9rem]">
                        <p class="truncate text-[1rem] font-[Inter] font-medium leading-[1.5rem] text-[#000000]">{{ item.name }}</p>
                        <p class="truncate text-[0.75rem] font-[Inter] font-normal leading-[1rem] text-[#6B7280]" :title="item.description">{{ item.description }}</p>
                    </div>
                    <div :style="{color : item.actionColor}" @click="item.action" class="cursor-pointer flex items-center text-[0.875rem] whitespace-nowrap">
                        {{ item.actionName }}
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    const data = ref([
        {   
            imageBackground:'#DBEAFE',
            image:'/public/icon/grass.png',
            name: '新手任务',
            background:'linear-gradient(90deg, #EFF6FF 0%, rgba(255, 255, 255, 0) 100%)',
            description:'完成新手指南，获得积分奖励',
            actionName:'去完成',
            actionColor:'#2563EB',
            action:()=>{
                console.log('去完成')
            }
        },
        {   
            imageBackground:'#DCFCE7',
            image:'/public/icon/fire-green.png',
            name: '每日签到',
            background: 'linear-gradient(90deg, #F0FDF4 0%, rgba(255, 255, 255, 0) 100%)',
            description:'连续签到7天可获得额外奖励',
            actionName:'去签到',
            actionColor:'#16A34A',
            action:()=>{
                console.log('去签到')
            }
        }
    ])
</script>
<style scoped lang="scss">

</style>
